{% extends 'course/course_layout.html' %}

{% load static %}

{% block course_app %}
<div class="container">
    <ol>
        {% for question in questions %}
        <li>
            <div class="card border-light">
                <div class="card-body">
                    <p>
                        {{ question.content }} &nbsp;&#40;{{ question.score }}&#39;&#41;
                    </p>
                    {# `write-answer-btn` is just a query selector, no css provided #}
                    <button class="write-answer-btn btn btn-outline-secondary my-2"
                        question-id="{{ question.id }}">写回答</button>
                    <div class="d-none" id="answer-editor-{{ question.id }}">答案编辑器</div>
                    <div class="card mb-1">
                        <div class="card-header">我的答案</div>
                        <div class="card-body">
                            答案展示区
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header text-danger">解析</div>
                        <div class="card-body">
                            参考答案区
                        </div>
                    </div>

                    <div class="mt-2">
                        <button class="btn btn-outline-primary me-2" onClick={handleUpdate}>修改题目</button>
                        <button class="btn btn-outline-primary" onClick={handleCreate}>添加题目</button>
                    </div>

                </div>
            </div>
        </li>
        {% endfor %}
    </ol>
</div>
{% endblock %}


{% block script %}
<script src="{% static 'js/question.js' %}"></script>
{% endblock %}